<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 id="box"></h3>
    <input type="button" value="reload" onclick="reloadFun()">
    <script>
        /*   
           JSONP（JSON with Padding） 用json填充函数执行时的参数
            实现步骤
                1、因为存在跨域限制,所以使用不被跨域限制的JS加载方式完成数据的请求响应,因此该技术需要前端和后端代码的配合操作
                2、需要前端在当前页面中构建一个接收参数的JS函数  例如 function 函数名(arg){ …… }
                3、由前端通过 <script src="……?callback=方法名" > 方式指向后端请求地址,在当前页面被访问时,该请求会自动发送并以javascript语法运行返回的结果
                4、为让执行的JS代码所携带的数据能够执行前端定义的方函数,需要服务器端返回,以前端定义的函数名作为JS的函数调用,服务器数据作为参数进行定义
                    如koa服务器代码:
                    router.get("/jsonp",async function(ctx){
  

                        let funName=ctx.query.callback;//show
                        let obj={
                            a:Math.random(),
                            b:200,
                            arr:[100,200,300,400]
                        };
                        let str=JSON.stringify(obj);
                        ctx.body=funName+"("+str+")";
                
                    });

                      
                5、如果需要让上述过程能够在页面运行时,由用户控制访问时机,必须将<script src="……" >定义为动态创建功能,由JS方法控制
                6、为了保证执行函数的函数名不会因为定义或沟通，导致不对应，jsonp需要将方法名的定义权利转交由前端完成,后端基于前端定义规则进行适配
                7、因为JSONP技术是基于script标签完成的JS加载src路径方式实现,所以JSONP请求只能使用HTTP 的 get 模式（jsonp是不能完成大数据参数请求,例如文件上传）

            通过上述步骤,可以绕过HTTP协议的ajax跨域限制,完成在页面不刷新的情况下加载服务器数据的功能
            所以从代码规则上来说 JSONP 技术没有使用 XMLHttpRequest 对象
            也就是说JSONP不是ajax请求,但通过script脚本功能可以实现和ajax相同功能特性（异步、不刷新页面、加载服务端数据、动态DOM操作渲染页面…… 
            
        */
        function hello(arg){
            let box=document.getElementById("box");
            box.innerHTML="a:"+arg.a+",b:"+arg.b+",arr:"+arg.arr;
        }

        function reloadFun(){
            let scriptDom=document.createElement("script");//创建script标签
            scriptDom.src="http://127.0.0.1:3000/cors/jsonp?callback=hello";//设置src属性
            document.body.appendChild(scriptDom);//将script标签添加到body中来
            scriptDom.onload=function(){//给当前的script标签设置了监听，当该脚本加载且执行完成后进行删除
                document.body.removeChild(scriptDom);
            };
        }
    </script>
    <!-- <script src="http://127.0.0.1:3000/cors/jsonp?callback=show"></script> -->
</body>
</html>